// 源插件
import React, { Fragment, PureComponent } from 'react';
import {
  DateDiff,
  DateStamp,
  FormatnumberZero,
  Mover,
  NumberDivide,
  getNowFormatDate,
} from '@/function.js';

// 视图插件
import {
  Button,
  Card,
  Col,
  DatePicker,
  Divider,
  Form,
  Input,
  message,
  notification,
  Row,
  Switch,
} from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';

// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ history }) => ({
  history,
}))
@Form.create()
class StockOptionHistoryOrder extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
    dataSource2: {
      data: [],
      total: [],
      code: 0,
    },
    addVisible: false,
    updateVisible: false,
    row: {},
    time: null,
    time2: null,
    stock: null,
    cost: null,
    lastCost: '',
    profit: '',
  };

  dataSourceChange(date, date2, stock) {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'history/GetStockTradeLogListByStock',
      payload: date ||date2 || stock ? { start:date, end:date2 , stock } : {},
      callback: res => {
        that.setState({
          lastCost: res.list.lastCost || '',
          profit: res.list.profit || '',
          dataSource: {
            title: '股票历史交易记录',
            code: 1,
            data: res.list.logList,
            total: [],
            columns: [
              {
                title: '股票',
                dataIndex: 'myStock',
                type: 'string',
                search: true,
              },
              {
                title: '类型',
                dataIndex: 'operateType',
                width: 75,
                type: 'string',
                filters: [
                  {
                    text: '买',
                    value: 1,
                  },
                  {
                    text: '卖',
                    value: 0,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 1) {
                    res = '买';
                  }
                  if (value === 0) {
                    res = '卖';
                  }
                  return <span>{res}</span>;
                },
              },
              {
                title: '银行',
                dataIndex: 'bank',
                type: 'string',
                filters: [
                  {
                    text: '瑞银',
                    value: 1,
                  },
                  {
                    text: '花旗',
                    value: 2,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 1) {
                    res = '瑞银';
                  }
                  if (value === 2) {
                    res = '花旗';
                  }
                  return <span>{res}</span>;
                },
              },
              {
                title: 'aqDqMark',
                dataIndex: 'aqDqMark',
                type: 'string',
                filters: [
                  {
                    text: '股票操作',
                    value: 0,
                  },
                  {
                    text: 'AQDQ操作',
                    value: 1,
                  },
                  {
                    text: '行权',
                    value: 2,
                  },
                  {
                    text: '到期行权',
                    value: 3,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 0) {
                    res = '股票操作';
                  }
                  if (value === 1) {
                    res = 'AQDQ操作';
                  }
                  if (value === 2) {
                    res = '行权';
                  }
                  if (value === 3) {
                    res = '到期行权';
                  }

                  return <span>{res}</span>;
                },
              },
              {
                title: '本金市值',
                dataIndex: 'costMarketValue',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                dataIndex: 'costPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '现价',
                dataIndex: 'nowPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '操作数量',
                dataIndex: 'operateNum',
                type: 'number',
                sorter: true,
              },
              {
                title: '操作价格',
                dataIndex: 'operatePrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '盈利',
                dataIndex: 'profit',
                type: 'number',
                sorter: true,
              },
              {
                title: '盈亏百分比',
                dataIndex: 'profitPercent',
                type: 'number',
                sorter: true,
              },
              {
                title: '交易时间',
                dataIndex: 'tradeDate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '添加时间',
                dataIndex: 'insertTime',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '理由',
                dataIndex: 'reason',
                width: 100,
                type: 'string',
              },
            ],
          },
        });
      },
    });
    dispatch({
      type: 'history/GetOptionTradeLogListByStock',
      payload: date || date2 || stock ? { start:date, end:date2 , stock } : {},
      callback: res => {
        that.setState({
          dataSource2: {
            title: '期权历史交易记录',
            code: 1,
            data: res.list,
            total: [],
            columns: [
              {
                title: '代码',
                dataIndex: 'code',
                type: 'string',
                search: true,
              },
             {
                title: '期权代码',
                dataIndex: 'optionCode',
                type: 'string',
                search: true,
              },
              {
                title: '有效期',
                dataIndex: 'expiry',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '类型',
                dataIndex: 'typeName',
                width: 75,
                 filterAuto:true,
              },
              {
                title: '行权价',
                dataIndex: 'strikePrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '敞口',
                dataIndex: 'positionSize',
                type: 'number',
                sorter: true,
              },
              {
                title: '操作价格',
                dataIndex: 'costPrice',
                type: 'number',
                sorter: true,
              },
       {
                title: '期权数量',
                dataIndex: 'optionCount',
                type: 'number',
                sorter: true,
              },
       {
                title: '总权利金',
                dataIndex: 'money',
                type: 'number',
                sorter: true,
         render: (value, row, index) => {
           return (
             <span>{window.mathService.mul(row.costPrice, row.optionCount)}</span>
           );
         },
              },
              {
                title: '交易日',
                dataIndex: 'tradeDate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              }
            ],
          },
        });
      },
    });
  }

  onSelectTime(e) {
    this.setState({
      time: getNowFormatDate(e._d),
    });
  }
  onSelectTime2(e) {
    this.setState({
      time2: getNowFormatDate(e._d),
    });
  }

  onSelectType(e) {
    this.setState({
      stock: e.target.value,
    });
  }

  costChange(e) {
    this.setState({
      cost: e.target.value,
    });
  }

  searchBeta() {
    this.dataSourceChange(this.state.time, this.state.time2, this.state.stock);
  }

  render() {
    const { dataSource, dataSource2, lastCost, profit } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Row>
            <Col md={24} sm={24} style={{ marginBottom: 15 }}>
              输入股票代码：
              <Input style={{ width: 200, margin: 4 }} onChange={this.onSelectType.bind(this)} />
              <span style={{ marginLeft: 25 }}>
                选择时间：
                <DatePicker
                  // showTime
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  style={{ width: 200 }}
                  onChange={this.onSelectTime.bind(this)}
                />
                <DatePicker
                  // showTime
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  style={{ width: 200, marginLeft: 25 }}
                  onChange={this.onSelectTime2.bind(this)}
                />
                <Button
                  onClick={this.searchBeta.bind(this)}
                  style={{ marginLeft: 25 }}
                  type="primary"
                >
                  搜索
                </Button>
              </span>
            </Col>
            <Col md={24} sm={24}>
              该股票最近成本： <span style={{marginRight:20}}> {lastCost} </span>
              股票期权总盈利： <span> {NumberDivide(profit,0)} </span>
            </Col>
          </Row>
          <br />
          <StandardTablePro dataSource={dataSource} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSource2} />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default StockOptionHistoryOrder;
